﻿/* 顶部导航 */
.navbar {
    animation: enter-top 0.8s;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    transition: background-color 0.5s;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a {
    color: #FFFFFF;
    transition: color 0.5s;
}
.navbar-default .navbar-nav>li {
    padding: 10px 15px;
}
.navbar-default .navbar-nav>li>a {
    padding: 5px 0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover {
    color: #FFFFFF;
    background-color: initial;
    border-bottom: 2px solid #FFFFFF;
    transition: color 0.5s, border-bottom-color 0.5s;
}

.navbar.navbar-solid {
    background-color: rgba(0,0,0,0.85);
    /*box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);*/
}
.navbar.navbar-solid .navbar-brand,
.navbar.navbar-solid .navbar-brand:hover {
    color: #FFFFFF;
}
.navbar.navbar-solid .navbar-nav>li>a,
.navbar.navbar-solid .navbar-nav>li>a:focus,
.navbar.navbar-solid .navbar-nav>.active>a {
    color: #FFFFFF;
}
.navbar.navbar-solid .navbar-nav>li>a:hover,
.navbar.navbar-solid .navbar-nav>.active>a,
.navbar.navbar-solid .navbar-nav>.active>a:hover {
    color: #FFFFFF;
    color: #FFFFFF;
}

.navbar-default .navbar-toggle {
    border-color: #FFFFFF;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFFFFF;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.5);
} 
.navbar.navbar-solid .navbar-toggle {
    border-color: #888;
}
.navbar.navbar-solid .navbar-toggle .icon-bar {
    background-color: #888;
}
.navbar.navbar-solid .navbar-toggle:focus,
.navbar.navbar-solid .navbar-toggle:hover {
    background-color: #ddd;
}


/* 产品封面 */
.jumbotron {
    position: relative;
    height: 600px;
    overflow: hidden;
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.5);


    background-position: center;
    background-size: 400%;
    background-repeat: repeat-y;
}
.over {
    position: absolute;
    top:0;
    left: 0;
    height: 700px;
    overflow: hidden;
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.85);
    background-image: url('https://api.ooopn.com/image/bing/api.php?v=2&type=jump');
width: 100%;
    background-position: center center;
    background-attachment: fixed;
}
.jumbotron .page-display {
    display: none;
    animation: enter-left 0.8s;
    margin-top: 180px;
    width: 90%;
}
.jumbotron .introduce {
    animation: enter-right 0.8s;
    margin-top: 144px;
    color: #FFFFFF;
    text-align: center;
}
.jumbotron .introduce h1 {
    font-size: 32px;
    font-weight: bold;
}
.jumbotron .download {
    margin-top: 28px;
    display: inline-block;
    padding: 0 45px;
    height: 60px;
    line-height: 60px;
    border: 1px solid #FFFFFF;
    font-size: 24px;
    color: #FFFFFF;
    transition: all .5s;
    -webkit-transition: all .5s;
    text-decoration: none;
    border-radius: 2px;
}
.jumbotron .download:hover {
    color: #009688;
    border: 1px solid #009688;
    background-color: #FFFFFF;
}
.jumbotron .download .glyphicon {
    margin-right: 10px;
}
.jumbotron .versions {
    font-size: 14px;
}
.jumbotron .versions a{
    color: #FFFFFF;
    text-decoration: underline;
}

/* 技术栈 */
.technology-stack {
    color: rgb(68, 84, 106);
    margin-bottom: -20px;
}
.technology-stack .technology-body {
    font-size: 22px;
    text-align: center;
    padding: 20px 0;
}
.technology-stack .technology-item {
    margin: 24px 0;
}
.technology-stack .technology-icon {
    height: 68px;
    margin-bottom: 6px;
}

/* 系统功能 */
.modules-body {
    margin: -15px 0;
}
.modules-card {
    position: relative;
    overflow: hidden;
    margin: 15px 0;
}
.modules-card-number {
    position: absolute;
    top: -45px;
    right: -45px;
    z-index: 90;
    width: 90px;
    height: 90px;
    transform: rotate(45deg);
    background-color: #666666;
}
.modules-card-number .code {
    display: inline-block;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
    transform: rotate(-45deg);
    margin-top: 57px;
    margin-left: 41px;
}
.modules-card-interval {
    position: absolute;
    top: -52px;
    right: -52px;
    z-index: 77;
    width: 104px;
    height: 104px;
    transform: rotate(45deg);
    border-bottom: 1px solid #666666;
    background-color: #FFFFFF;
}
.modules-card-body {
    border: 1px solid #666666;
    border-bottom: 10px solid #666666;
    height: 340px;
    padding: 46px 30px;
}
.modules-card-body .card-title {
    color: rgb(64, 64, 64);
    font-weight: bold;
    font-size: 22px
}
.modules-card-body .card-content {
    color: rgb(127, 127, 127);
}

/* 卡片黄色 */
.modules-card-yellow .modules-card-number {
    background-color: rgb(255, 194, 0);
}
.modules-card-yellow .modules-card-interval {
    border-bottom-color: rgb(255, 194, 0);
}
.modules-card-yellow .modules-card-body {
    border-color: rgb(255, 194, 0);
}

/* 卡片红色 */
.modules-card-red .modules-card-number {
    background-color: #e7604a;
}
.modules-card-red .modules-card-interval {
    border-bottom-color: #e7604a;
}
.modules-card-red .modules-card-body {
    border-color: #e7604a;
}

/* 卡片绿色 */
.modules-card-green .modules-card-number {
    background-color: #1abc9c;
}
.modules-card-green .modules-card-interval {
    border-bottom-color: #1abc9c;
}
.modules-card-green .modules-card-body {
    border-color: #1abc9c;
}

/* 页脚 */
footer {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

/* 响应区 */

@media (min-width: 768px) { 
    .jumbotron {
        height: 700px;
        background-size: 240%;
    }
}
@media (min-width: 992px) { 
    .jumbotron {
        background-size: 150%;
    }
    .jumbotron .page-display {
        display: inline-block;
    }
    .jumbotron .introduce {
        margin-left: 80px;
    }
    .jumbotron .introduce h1 {
        font-size: 56px;
    }
}
@media (min-width: 1200px) { 
    .jumbotron {
        background-size: 100%;
    }
}

/* 动画区 */
@keyframes enter-top {
    from {transform: translateY(-100%); opacity: 0}
    to {transform: translateX(0); opacity: 1}
}
@keyframes enter-left {
    from {transform: translateX(-100%); opacity: 0}
    to {transform: translateX(0); opacity: 1}
}
@keyframes enter-right {
    from {transform: translateX(100%); opacity: 0}
    to {transform: translateX(0); opacity: 1}
}

/* 广告位 */
#tk_box_1 {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: #FFFFFF;
}
#tk_box_1:before {
    content: "关闭";
}